"use strict";

class Watermark {
  /**
   * @param {急需要将水印放在那个元素里面,默认为body} dom
   * @param {canvas的id} id
   * @param {设置canvas的宽度} width
   * @param {设置canvas的高度} height
   * @param {水印样式表,按照字符串的形式传递进来} styleString
   * @param {水印文本} text
   */
  constructor({ dom, id, width, height, styleString, text }) {
    this.dom = dom || document.body;
    this.id = id;
    this.width = width;
    this.height = height;
    this.styleString =
      styleString ||
      "position: fixed;top:0;left:0; z-index: 9999999; pointer-events: none; opacity: 0.5;";
    this.text = text;
  }

  // 创建画布
  createdCanvas() {
    const canvas = document.createElement("canvas");
    // 设置画布属性
    canvas.setAttribute("id", this.id);
    canvas.width = this.width;
    canvas.height = this.height;
    canvas.style = this.styleString;
    // 插入画布
    this.dom.appendChild(canvas);
  }
  // 清除画布
  clearCanvas() {
    // 获取当前canvas的id
    const oldCanvas = document.getElementById(this.id);
    // 清除旧的canvas
    if (oldCanvas) {
      oldCanvas.parentNode.removeChild(oldCanvas);
    } else {
      console.log("清除canvas");
    }
  }

  // 添加水印
  draw() {
    const canvasElement = document.getElementById(this.id);
    const ctx = canvasElement.getContext("2d");
    const { width: textWidth } = ctx.measureText(this.text);
    const boxHeight = 100;
    const boxWidth = textWidth + 100;
    const yCount = parseInt(this.height / boxHeight); //行数
    const xCount = parseInt(this.width / boxWidth) + 3; // 最多产生多少个
    const top = 50;
    for (let i = 0; i < xCount; i++) {
      for (let j = 0; j < yCount; j++) {
        ctx.save();
        ctx.translate(boxWidth * i, j * boxHeight - top);
        ctx.rotate((-45 * Math.PI) / 180); // 角度转换 2PI = 360度
        ctx.fillStyle = this.color;
        ctx.font = "normal " + this.fontSize + "px Microsoft Yahei";
     
        ctx.fillText(this.text, 10, 0);
        ctx.restore();
      }
    }
  }

  // 初始化函数
  init() {
    // 先清除旧的canvas
    this.clearCanvas();
    this.clearLock();
    this.createdCanvas();
    this.draw();
    this.safetyLock();
  }

  safetyLock() {
    // 选择需要观察变动的节点
    const targetNode = document.getElementById(this.id);

    // 观察器的配置（需要观察什么变动）
    const config = { attributes: true, childList: true, subtree: true };

    // 当观察到变动时执行的回调函数
    const callback = (mutationsList) => {
      for (const mutation of mutationsList) {
        if (mutation.type === "childList") {
          console.log("A child node has been added or removed.");
          this.init();
        } else if (mutation.type === "attributes") {
          console.log(
            "The " + mutation.attributeName + " attribute was modified."
          );
          this.init();
        }
      }
    };

    // 创建一个观察器实例并传入回调函数
    const observer = new MutationObserver(callback);

    // 以上述配置开始观察目标节点
    observer.observe(targetNode, config);

    this.observer = observer;
  }

  clearLock() {
    if (this.observer) {
      this.observer.disconnect();
    }
  }

  destroyed() {
    this.clearCanvas();
    this.clearLock();
  }
}

// module.exports = Watermark;
